<script>
import _ from 'lodash'
import DeviceService from '@/request/reservation/device'
export default {
  name: 'AdminReservationDevice',
  data () {
    return {
      options: {},
      pagination: {
        sort: null,
        order: null,
        size: 10,
        total: 0,
        current: 1,
        layout: 'total, sizes, prev, pager, next, jumper',
        sizes: [10, 20, 30]
      },
      listLoading: false,
      list: [],
      visibleEditDevice: false,
      editDevice: {
        sn: null,
        name: null,
        site: null,
        state: 1,
        remark: null
      }
    }
  },
  created: function () {
    this.listDevice()
  },
  watch: {
    'options': {
      deep: true,
      handler (val) {
        this.listDevice()
      }
    }
  },
  methods: {
    handleSizeChange: function (val) {
      this.pagination.size = val
      this.listDevice()
    },
    handleCurrentChange: function (val) {
      this.pagination.current = val
      this.listDevice()
    },
    listDevice () {
      let listp = DeviceService.find(this.options, this.pagination)
      this.listLoading = true
      listp.then(res => {
        let data = res.result || {}
        this.list = _.clone(data.content || [])
        this.pagination.total = data.totalElements || 0
      })
      listp.finally(() => {
        this.listLoading = false
      })
    },
    handleCancelEditDevice () {
      this.editDevice = {
        sn: null,
        name: null,
        site: null,
        state: 1,
        remark: null
      }
    },
    handleEditDevice (item) {
      this.editDevice = item ? _.cloneDeep(item) : {
        sn: null,
        name: null,
        site: null,
        state: 1,
        remark: null
      }
      this.visibleEditDevice = true
    },
    handleDeleteDevice (item) {
      let confirm = this.$confirm('确认删除设备[' + item.name + ']吗?', '提示', {type: 'warning'})
      confirm.then(() => {
        DeviceService.delete({id: item.id}).then(() => {
          this.$message({
            type: 'success',
            message: '删除设备成功'
          })
          this.listDevice()
        }).catch(error => {
          this.$message.error(error || '删除设备失败')
        })
      })
      confirm.catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    },
    handleSaveDeviceSuccess (device) {
      this.visibleEditDevice = false
      this.listDevice()
    },
    handleSaveDeviceError (error) {
      this.$message.error(error || '保存设备失败')
    }
  }
}
</script>

<template>
  <el-container>
    <el-header height="45px">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="primary" @click="handleEditDevice()">添加</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="list"
        stripe
        border
        style="width: 100%">
        <el-table-column prop="sn" label="编码" width="120"></el-table-column>
        <el-table-column prop="name" label="名称" width="120"></el-table-column>
        <el-table-column prop="state" label="状态" width="80"></el-table-column>
        <el-table-column prop="site" label="位置" width="180"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEditDevice(scope.row)">编辑</el-button>
            <el-button size="small" type="text" style="color: #FF4949;" @click="handleDeleteDevice(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer height="35px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="pagination.sizes" :page-size="pagination.size" :layout="pagination.layout" :total="pagination.total"></el-pagination>
    </el-footer>
    <!-- 编辑角色 -->
    <el-dialog title="编辑设备" :visible.sync="visibleEditDevice" @close="handleCancelEditDevice">
      <reservation-device-edit :data="editDevice" @success="handleSaveDeviceSuccess" @error="handleSaveDeviceError" @cancle="visibleEditDevice = false"></reservation-device-edit>
    </el-dialog>
  </el-container>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
